<template>
  <div>
    <van-button
      style="position:fixed;top: 30px;right:0;z-index:999"
      type="primary"
    >loading:{{loading}}===finished:{{ finished }}===按钮===refreshing: {{ refreshing }}=={{ list.length }}</van-button>
    <van-pull-refresh @refresh="onRefresh" v-model="refreshing">
      <van-list
        :finished="finished"
        @load="onLoad"
        finished-text="我是有底线的"
        offset="100"
        v-model="loading"
      >
        <van-cell :key="index" :title="index+'====='+item.goods_name" v-for="(item,index) in list" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      pagenum: 0,
      pagesize: 20,
      list: [],
      loading: false,//加载状态 只要onLoad触发就会变成true
      finished: false,//不能上拉，到底了
      refreshing: false,
    };
  },
  created () {

  },
  methods: {
    onLoad () {
      /* 初次进入也会触发，上拉就触发 */
      console.log('onLoad');

      /* 设置终止上拉条件 */
      if (this.pagenum > 3) {
        this.loading = false// 结束当前加载
        this.finished = true//结束上拉，设置值为true就表示不能上拉了
        return
      }

      // setTimeout(() => {
      //   for (var i = 0; i < 20; i++) {
      //     this.list.push(this.list.length + 1)
      //   }

      // this.loading = false// 结束当前加载

      // }, 2000)

      this.pagenum += 1
      this.getData()

    },

    async getData () {
      const res = await axios({
        url: 'http://vue-shop-api-t.itheima.net/api/private/v1/goods',
        headers: {
          Authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjUwMCwicmlkIjowLCJpYXQiOjE2ODU0MzEyOTgsImV4cCI6MTY4NTUxNzY5OH0.rMLF5nxywTFwqBVP7RWyNJ_qEXoleuetLMbAHDz-NvI'
        },
        params: {
          pagenum: this.pagenum,
          pagesize: this.pagesize
        }
      })
      console.log(res, 77);
      this.list = this.refreshing ? res.data.data.goods : [...this.list, ...res.data.data.goods]
      this.loading = false// 结束当前加载
      this.refreshing = false//关闭下拉
    },
    onRefresh () {
      /* 下拉就会触发 */
      // 清空列表数据
      this.finished = false; //finished:true  不能开启上拉 表示又可以继续上拉了

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      // this.loading = true;
      this.pagenum = 0
      this.onLoad();
    },
  },
};
</script>
<style lang='less'  scoped>
</style>